<div class="amplify-flex amplify-field amplify-authenticator__column">
  <!-- Country code field -->
  <amplify-phone-number-field
    *ngIf="isPhoneField()"
    [name]="name"
    [label]="formField.label"
    [defaultCountryCode]="formField.dialCode"
    [dialCodeList]="formField.dialCodeList"
    [placeholder]="formField.placeholder"
    [required]="formField.isRequired"
    [labelHidden]="formField.labelHidden"
    [autocomplete]="formField.autocomplete"
    [hasError]="hasError"
    [describedBy]="ariaDescribedBy"
    type="tel"
  ></amplify-phone-number-field>

  <amplify-password-field
    *ngIf="isPasswordField()"
    [name]="name"
    [label]="formField.label"
    [placeholder]="formField.placeholder"
    [required]="formField.isRequired"
    [labelHidden]="formField.labelHidden"
    [autocomplete]="formField.autocomplete"
    [hasError]="hasError"
    [describedBy]="ariaDescribedBy"
    (setBlur)="onBlur($event)"
  ></amplify-password-field>

  <amplify-text-field
    *ngIf="!isPasswordField() && !isPhoneField()"
    [name]="name"
    [label]="formField.label"
    [placeholder]="formField.placeholder"
    [required]="formField.isRequired"
    [labelHidden]="formField.labelHidden"
    [autocomplete]="formField.autocomplete"
    [type]="formField.type"
    [hasError]="hasError"
    [describedBy]="ariaDescribedBy"
  ></amplify-text-field>

  <div
    data-amplify-sign-up-errors
    *ngIf="hasError()"
    [id]="errorId"
  >
    <div
      class="amplify-text amplify-text--error"
      data-variation="error"
      *ngFor="let error of errors"
    >
      {{ translate(error) }}
    </div>
  </div>
</div>